<template>
  <a-drawer v-model:visible="visible" title="结算数据详情" :width="width >= 600 ? 600 : '100%'" :footer="false">
    <a-descriptions :column="2" size="large" class="general-description">
      <!--      <a-descriptions-item label="ID">{{ dataDetail?.id }}</a-descriptions-item>-->
      <a-descriptions-item label="结算期间" :span="2">{{ dataDetail?.payDate }}</a-descriptions-item>

      <a-descriptions-item label="平台">
        {{ dataDetail?.platform }}
      </a-descriptions-item>

      <a-descriptions-item label="平台">
        <GiCellTag :value="dataDetail?.platform" :dict="platform_type"/>
        - <span style="font-size: 12px;color: #1890ff">{{ dataDetail?.channel }}</span>
      </a-descriptions-item>

      <a-descriptions-item label="歌曲名称" :span="2">
        {{ dataDetail?.song }}
      </a-descriptions-item>


      <a-descriptions-item label="歌手名称" :span="2">{{ dataDetail?.singer }}</a-descriptions-item>
      <a-descriptions-item label="专辑名称" :span="2">{{ dataDetail?.album }}</a-descriptions-item>
      <a-descriptions-item label="CP分成" :span="2">{{ dataDetail?.cpInto }}(￥)</a-descriptions-item>

      <a-descriptions-item label="艺人归属" v-if="dataDetail?.belongToName">
        <span style="color: #1890ff">{{ dataDetail?.belongToName }}</span>
      </a-descriptions-item>

      <a-descriptions-item label="艺人归属" v-else>
        <span style="color: #999">暂未绑定</span>
      </a-descriptions-item>

      <a-descriptions-item label="状态">
        <GiCellTag :value="dataDetail?.status" :dict="settlement_status"/>
      </a-descriptions-item>

      <!--      <a-descriptions-item label="创建人">{{ dataDetail?.createUser }}</a-descriptions-item>-->
      <a-descriptions-item label="数据导入时间" :span="2">{{ dataDetail?.createTime }}</a-descriptions-item>
    </a-descriptions>
  </a-drawer>
</template>

<script setup lang="ts">
import {useWindowSize} from '@vueuse/core'
import {type SettlementDetailResp, getSettlement as getDetail} from '@/apis/settlement/report'
import {useDict} from "@/hooks/app";

const {
  channel_type, platform_type, settlement_status
} = useDict('channel_type', 'platform_type', 'settlement_status')

const {width} = useWindowSize()

const dataId = ref('')
const dataDetail = ref<SettlementDetailResp>()
const visible = ref(false)

// 查询详情
const getDataDetail = async () => {
  const {data} = await getDetail(dataId.value)
  dataDetail.value = data
}

// 打开
const onOpen = async (id: string) => {
  dataId.value = id
  await getDataDetail()
  visible.value = true
}

defineExpose({onOpen})
</script>

<style scoped lang="scss"></style>
